<template>
  <div class="container container_province">
    <!-- 定位地址 -->
    <div class='location'>
      <img src='https://img.ameimeika.com/active/d5baee1442d8c4862f2ee48fdc47922e.png'>
      <span>当前定位：</span>
      <span class='pro'>{{location.name}}</span>
    </div>
    <!-- 所有省份 -->
    <div class='p_title'>所有省份</div>
    <scroll-view :scroll-y="true" :style="{'height': clientHeight+'px'}" v-if="prolist.length>0">
      <div class='pro_list'>
        <block v-for="(item,index) in prolist" :key="index">
          <div @click='setProvince(item.province_id,item.name,)'
            :class='item.province_id == location.province_id?"change":""'>{{item.name}}</div>
        </block>
      </div>
    </scroll-view>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
export default {
  data() {
    return {
      clientHeight: 0,
      location: { province_id: 13, name: "湖北省" }, //定位默认湖北省
      prolist: {}
    };
  },
  methods: {
    //获取所有省份
    getallprovince() {
      common.mmk_Loading(0);
      common.fly_post("/api/act/material/province_list", {}, msg => {
        common.mmk_Loading(1);
        let res = msg.data;
        if (res.status_code == 0) {
          this.prolist = res.data;
        } else {
          common.mmk_Loading(2, res.msg);
        }
      });
    },
    //选择省份
    setProvince(province_id, name) {
      this.location.province_id = province_id;
      this.location.name = name;
      let location = JSON.stringify(this.location)
      wx.redirectTo({
        url: `/pages/material_center/material/main?new_location=${location}`
      });
    }
  },
  onLoad(options) {
    let that = this;
    wx.setNavigationBarTitle({
      title: "选择省份"
    });
    this.location = options;
    wx.getSystemInfo({
      success: function(res) {
        // 获取可使用窗口宽度
        let clientHeight = res.windowHeight;
        that.clientHeight = clientHeight - 81;
      }
    });
    //获取所有省份
    this.getallprovince();
  },
  onShow() {},
  watch: {}
};
</script>

<style lang="less" scoped>
.container_province {
  min-height: 100%;
  background: #f5f5f5;
  overflow-y: auto;
}
/* 定位地址 */
.location {
  height: 44px;
  line-height: 44px;
  background: #fff;
  border-top: 1px solid #eee;
  padding: 0 15px;
  font-size: 14px;
}
.location img {
  width: 14px;
  height: 16px;
  vertical-align: middle;
  margin-right: 10px;
}
.location .pro {
  color: #fe4489;
}
/* 所有省份 */
.p_title {
  height: 37px;
  line-height: 37px;
  font-size: 12px;
  color: #666;
  padding: 0 15px;
}
.pro_list {
  padding: 10px 0 0;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
}
.pro_list div {
  width: 30%;
  height: 38px;
  line-height: 38px;
  overflow: auto;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
  color: #444;
  margin-left: 2%;
  margin-bottom: 3%;
}
.pro_list .change {
  color: #fe4489;
  border: 1px solid #fe4489;
}
</style>

